<template>
  <cas :data="options" @on-change="handleChange" transfer>
    <v-combobox
      clearable
      readonly
      v-model="selectedData"
      :items="items"
      label="请选择地区"
      multiple
      @click:clear="clearable"
    >
    </v-combobox>
  </cas>
</template>

<script>
import { Cascader } from "iview";
import "iview/dist/styles/iview.css";

export default {
  name: "vCascader",
  components: {
    cas: Cascader,
  },
  props: {},
  data() {
    return {
      options: [],
      selected: [],
      selectedData: [],
      items: [],
    };
  },
  created() {
    this.getCityData();
  },
  methods: {
    getCityData() {
      this.Http.get("/api/area/city").then((res) => {
        if (res.code == 1) {
          this.options = res.data;
          this.items = res.data;
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    handleChange(value, selectedData) {
      this.selected = value;
      this.selectedData = selectedData.map((item) => {
        return item.label;
      });
      this.$emit("changeCity", value);
    },
    clearable() {
      this.$emit("changeCity", []);
    }
  },
};
</script>

<style scoped>
.ivu-cascader-menu-item {
  font-size: 14px;
}
</style>